<template>
  <div>
    <el-container>
      <SidebarMenu
        :default-active="activeMenu"
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
        @goToLogManagement="goToLogManagement"
        @goToFileManagement="goToFileManagement"
        @goToArticleManagement="goToArticleManagement"
        @goToUserInfoManagement="goToUserInfoManagement"
      />

      <el-container>
        <el-header>
          <Navbar title="权限管理" :avatar="currentAvatar" />

        </el-header>

        <el-main>
          <!-- 查询表单 -->
          <el-card class="query-card" shadow="never">
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="权限名称">
                <el-input v-model="queryForm.permissionName" placeholder="请输入权限名称" />
              </el-form-item>
              <el-form-item label="权限类型">
                <el-select v-model="queryForm.permissionType" placeholder="请选择权限类型" clearable>
                  <el-option label="菜单权限" value="menu" />
                  <el-option label="操作权限" value="operation" />
                  <el-option label="数据权限" value="data" />
                </el-select>
              </el-form-item>
              <el-form-item label="权限状态">
                <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
                  <el-option label="启用" value="active" />
                  <el-option label="禁用" value="inactive" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchPermissions">查询</el-button>
                <el-button @click="resetQueryForm">重置</el-button>
                <el-button type="success" @click="showCreateDialog">新增权限</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 统计信息 -->
          <el-row :gutter="20" class="statistics-row">
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.totalPermissions }}</div>
                  <div class="statistics-label">总权限数</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.activePermissions }}</div>
                  <div class="statistics-label">启用权限</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.menuPermissions }}</div>
                  <div class="statistics-label">菜单权限</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.operationPermissions }}</div>
                  <div class="statistics-label">操作权限</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 权限表格 -->
          <el-card class="permission-table-card">
            <template #header>
              <div class="card-header">
                <span>权限列表</span>
                <div class="header-actions">
                  <el-button type="warning" size="small" @click="batchDisable">批量禁用</el-button>
                  <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
                </div>
              </div>
            </template>

            <el-table :data="permissions" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="权限名称" min-width="200">
                <template #default="scope">
                  <div class="permission-name">
                    <i :class="scope.row.icon" class="permission-icon"></i>
                    <span v-if="scope.row.isSystem" class="system-badge">系统</span>
                    {{ scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="权限编码" width="200" />
              <el-table-column prop="type" label="权限类型" width="120">
                <template #default="scope">
                  <el-tag :type="getPermissionTypeColor(scope.row.type)">
                    {{ getPermissionTypeLabel(scope.row.type) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="module" label="所属模块" width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                    {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160">
                <template #default="scope">
                  {{ formatDateTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                  <el-button type="text" size="small" @click="editPermission(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="viewRoles(scope.row)">查看角色</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="toggleStatus(scope.row)"
                    :disabled="scope.row.isSystem"
                  >
                    {{ scope.row.status === 'active' ? '禁用' : '启用' }}
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="deletePermission(scope.row)"
                    :disabled="scope.row.isSystem"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination

                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 新增/编辑权限对话框 -->
    <el-dialog v-model="permissionDialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="permissionForm" :rules="permissionRules" ref="permissionFormRef" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="permissionForm.name" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限编码" prop="code">
          <el-input v-model="permissionForm.code" placeholder="请输入权限编码" />
        </el-form-item>
        <el-form-item label="权限类型" prop="type">
          <el-select v-model="permissionForm.type" placeholder="请选择权限类型">
            <el-option label="菜单权限" value="menu" />
            <el-option label="操作权限" value="operation" />
            <el-option label="数据权限" value="data" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属模块" prop="module">
          <el-select v-model="permissionForm.module" placeholder="请选择所属模块">
            <el-option label="用户管理" value="user" />
            <el-option label="权限管理" value="permission" />
            <el-option label="系统管理" value="system" />
            <el-option label="内容管理" value="content" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限图标">
          <el-input v-model="permissionForm.icon" placeholder="请输入图标类名" />
        </el-form-item>
        <el-form-item label="权限状态" prop="status">
          <el-radio-group v-model="permissionForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input
            v-model="permissionForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入权限描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePermission">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看角色对话框 -->
    <el-dialog v-model="roleDialogVisible" title="权限关联角色" width="800px">
      <el-table :data="permissionRoles" style="width: 100%">
        <el-table-column prop="name" label="角色名称" width="150" />
        <el-table-column prop="description" label="角色描述" width="200" />
        <el-table-column prop="userCount" label="用户数" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import SidebarMenu from './SidebarMenu.vue';
import Navbar from './CommonNavbar.vue'

const router = useRouter();
const activeMenu = ref('2-3'); // 权限控制菜单项
const loading = ref(false);
const permissionDialogVisible = ref(false);
const roleDialogVisible = ref(false);
const selectedPermission = ref({});
const selectedRows = ref([]);
const permissionFormRef = ref();

// 头像切换
// 查询表单
const queryForm = ref({
  permissionName: '',
  permissionType: '',
  status: ''
});

// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});

// 统计信息
const statistics = ref({
  totalPermissions: 45,
  activePermissions: 42,
  menuPermissions: 15,
  operationPermissions: 30
});

// 权限表单
const permissionForm = ref({
  name: '',
  code: '',
  type: '',
  module: '',
  icon: '',
  status: 'active',
  description: ''
});

// 表单验证规则
const permissionRules = {
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
    { min: 2, max: 20, message: '权限名称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入权限编码', trigger: 'blur' },
    { pattern: /^[A-Z_]+$/, message: '权限编码只能包含大写字母和下划线', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择权限类型', trigger: 'change' }
  ],
  module: [
    { required: true, message: '请选择所属模块', trigger: 'change' }
  ]
};

// 权限数据
const permissions = ref([
  {
    id: 1,
    name: '查看用户',
    code: 'USER_VIEW',
    type: 'operation',
    module: 'user',
    icon: 'el-icon-view',
    status: 'active',
    description: '查看用户信息的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 2,
    name: '创建用户',
    code: 'USER_CREATE',
    type: 'operation',
    module: 'user',
    icon: 'el-icon-plus',
    status: 'active',
    description: '创建新用户的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 3,
    name: '编辑用户',
    code: 'USER_EDIT',
    type: 'operation',
    module: 'user',
    icon: 'el-icon-edit',
    status: 'active',
    description: '编辑用户信息的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 4,
    name: '删除用户',
    code: 'USER_DELETE',
    type: 'operation',
    module: 'user',
    icon: 'el-icon-delete',
    status: 'active',
    description: '删除用户的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 5,
    name: '用户管理菜单',
    code: 'USER_MENU',
    type: 'menu',
    module: 'user',
    icon: 'el-icon-user',
    status: 'active',
    description: '用户管理菜单访问权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 6,
    name: '查看角色',
    code: 'ROLE_VIEW',
    type: 'operation',
    module: 'permission',
    icon: 'el-icon-view',
    status: 'active',
    description: '查看角色信息的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 7,
    name: '创建角色',
    code: 'ROLE_CREATE',
    type: 'operation',
    module: 'permission',
    icon: 'el-icon-plus',
    status: 'active',
    description: '创建新角色的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 8,
    name: '编辑角色',
    code: 'ROLE_EDIT',
    type: 'operation',
    module: 'permission',
    icon: 'el-icon-edit',
    status: 'active',
    description: '编辑角色信息的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 9,
    name: '删除角色',
    code: 'ROLE_DELETE',
    type: 'operation',
    module: 'permission',
    icon: 'el-icon-delete',
    status: 'active',
    description: '删除角色的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 10,
    name: '角色管理菜单',
    code: 'ROLE_MENU',
    type: 'menu',
    module: 'permission',
    icon: 'el-icon-s-custom',
    status: 'active',
    description: '角色管理菜单访问权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 11,
    name: '查看菜单',
    code: 'MENU_VIEW',
    type: 'operation',
    module: 'permission',
    icon: 'el-icon-view',
    status: 'active',
    description: '查看菜单信息的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 12,
    name: '菜单管理菜单',
    code: 'MENU_MENU',
    type: 'menu',
    module: 'permission',
    icon: 'el-icon-menu',
    status: 'active',
    description: '菜单管理菜单访问权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 13,
    name: '系统设置',
    code: 'SYSTEM_SETTING',
    type: 'operation',
    module: 'system',
    icon: 'el-icon-setting',
    status: 'active',
    description: '系统设置操作权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 14,
    name: '查看日志',
    code: 'LOG_VIEW',
    type: 'operation',
    module: 'system',
    icon: 'el-icon-document',
    status: 'active',
    description: '查看系统日志的权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  },
  {
    id: 15,
    name: '系统管理菜单',
    code: 'SYSTEM_MENU',
    type: 'menu',
    module: 'system',
    icon: 'el-icon-setting',
    status: 'active',
    description: '系统管理菜单访问权限',
    createTime: '2023-01-01 00:00:00',
    modifyTime: '2023-01-01 00:00:00',
    isSystem: true
  }
]);

// 权限关联角色数据
const permissionRoles = ref([
  {
    name: '超级管理员',
    description: '系统超级管理员，拥有所有权限',
    userCount: 1,
    status: 'active',
    createTime: '2023-01-01 00:00:00'
  },
  {
    name: '管理员',
    description: '系统管理员，负责系统日常管理',
    userCount: 3,
    status: 'active',
    createTime: '2023-01-02 00:00:00'
  },
  {
    name: '编辑员',
    description: '内容编辑员，负责内容管理',
    userCount: 8,
    status: 'active',
    createTime: '2023-01-03 00:00:00'
  }
]);

// 计算属性
const dialogTitle = computed(() => {
  return permissionForm.value.id ? '编辑权限' : '新增权限';
});

// 导航方法
const goToRoleManagement = () => {
  router.push('/RoleManagement');
};

const goToMenuManagement = () => {
  router.push('/MenuManagement');
};

const goToPermissionControl = () => {
  router.push('/PermissionControl');
};

const goToSystemSetting = () => {
  router.push('/system');
};

const goToLogManagement = () => {
  router.push('/LogManagement');
};

const goToFileManagement = () => {
  router.push('/FileManagement');
};

const goToArticleManagement = () => {
  router.push('/ArticleManagement');
};

const goToUserInfoManagement = () => {
  router.push('/UserInfoManagement');
};

// 查询方法
const searchPermissions = () => {
  loading.value = true;
  // 模拟API调用
  setTimeout(() => {
    console.log('查询条件:', queryForm.value);
    loading.value = false;
    ElMessage.success('查询完成');
  }, 1000);
};

const resetQueryForm = () => {
  queryForm.value = {
    permissionName: '',
    permissionType: '',
    status: ''
  };
};

// 显示新增对话框
const showCreateDialog = () => {
  permissionForm.value = {
    name: '',
    code: '',
    type: '',
    module: '',
    icon: '',
    status: 'active',
    description: ''
  };
  permissionDialogVisible.value = true;
};

// 编辑权限
const editPermission = (permission) => {
  permissionForm.value = { ...permission };
  permissionDialogVisible.value = true;
};

// 保存权限
const savePermission = async () => {
  try {
    await permissionFormRef.value.validate();

    if (permissionForm.value.id) {
      // 更新权限
      const index = permissions.value.findIndex(p => p.id === permissionForm.value.id);
      if (index !== -1) {
        permissions.value[index] = {
          ...permissions.value[index],
          ...permissionForm.value,
          modifyTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
        };
      }
      ElMessage.success('权限更新成功');
    } else {
      // 新增权限
      const newPermission = {
        ...permissionForm.value,
        id: Date.now(),
        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
        modifyTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
        isSystem: false
      };
      permissions.value.push(newPermission);
      ElMessage.success('权限创建成功');
    }

    permissionDialogVisible.value = false;
  } catch (error) {
    ElMessage.error('请检查表单信息');
  }
};

// 查看角色
const viewRoles = (permission) => {
  selectedPermission.value = permission;
  roleDialogVisible.value = true;
};

// 切换状态
const toggleStatus = (permission) => {
  const action = permission.status === 'active' ? '禁用' : '启用';
  ElMessageBox.confirm(`确定要${action}权限"${permission.name}"吗？`, `${action}确认`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    permission.status = permission.status === 'active' ? 'inactive' : 'active';
    ElMessage.success(`${action}成功`);
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 删除权限
const deletePermission = (permission) => {
  ElMessageBox.confirm(`确定要删除权限"${permission.name}"吗？此操作不可恢复！`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    permissions.value = permissions.value.filter(p => p.id !== permission.id);
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

// 批量操作
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

const batchDisable = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要禁用的权限');
    return;
  }
  ElMessageBox.confirm(`确定要禁用选中的${selectedRows.value.length}个权限吗？`, '批量禁用确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    selectedRows.value.forEach(permission => {
      if (!permission.isSystem) {
        permission.status = 'inactive';
      }
    });
    ElMessage.success('批量禁用成功');
  });
};

const batchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的权限');
    return;
  }
  ElMessageBox.confirm(`确定要删除选中的${selectedRows.value.length}个权限吗？此操作不可恢复！`, '批量删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    const ids = selectedRows.value.map(permission => permission.id);
    permissions.value = permissions.value.filter(permission => !ids.includes(permission.id) || permission.isSystem);
    ElMessage.success('批量删除成功');
  });
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  searchPermissions();
};

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page;
  searchPermissions();
};

// 格式化方法
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  return new Date(dateTime).toLocaleString('zh-CN');
};

const getPermissionTypeColor = (type) => {
  const colorMap = {
    'menu': 'primary',
    'operation': 'success',
    'data': 'warning'
  };
  return colorMap[type] || 'info';
};

const getPermissionTypeLabel = (type) => {
  const labelMap = {
    'menu': '菜单权限',
    'operation': '操作权限',
    'data': '数据权限'
  };
  return labelMap[type] || type;
};

// 组件挂载时加载数据
onMounted(() => {
  searchPermissions();
});
</script>

<style scoped>
.query-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.statistics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.statistics-item {
  text-align: center;
  padding: 20px 0;
}

.statistics-number {
  font-size: 28px;
  font-weight: bold;
  color: #4f46e5;
  margin-bottom: 8px;
}

.statistics-label {
  font-size: 14px;
  color: #666;
}

.permission-table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
  color: #4f46e5;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.permission-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.permission-icon {
  font-size: 16px;
  color: #666;
}

.system-badge {
  background: #ff6b6b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}


.navbar-avatar:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: scale(1.08);
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
}

.el-table th {
  background: #e0e7ff !important;
  color: #4f46e5;
  font-weight: 600;
  font-size: 15px;
}

.el-table tr {
  transition: background 0.2s;
}

.el-table tr:hover > td {
  background: #f1f5ff !important;
}

.el-table .el-button[type="text"] {
  color: #6366f1;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.el-table .el-button[type="text"]:hover {
  background: #e0e7ff;
  color: #3b3b3b;
}

.el-table .el-button[type="text"]:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border: none;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-input[type="textarea"] {
  width: 100%;
}
</style>
